<template>
  <div class="quotation">
    <div v-show="show">
      <h3>报价请求</h3>
      <el-form :inline="true" :model="params" class="demo-form-inline">
        <el-form-item label="用户名">
          <el-input
            clearable
            v-model="params.name"
            placeholder="用户名"
            @keydown.enter.native="onSubmit"
          ></el-input>
        </el-form-item>

        <el-form-item label="负责人">
          <el-input
            clearable
            v-model="params.charge"
            placeholder="负责人"
            @keydown.enter.native="onSubmit"
          ></el-input>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="danger" @click="delSelect">批量删除</el-button>
        </el-form-item>
      </el-form>

      <el-table
        class="table"
        @selection-change="handleSelectionChange"
        :data="tableData"
        style="width: 100%"
      >
        <!-- <el-table-column type="expand" fixed>
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="商品名称">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="所属店铺">
              <span>{{ props.row.shop }}</span>
            </el-form-item>
            <el-form-item label="商品 ID">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="店铺 ID">
              <span>{{ props.row.shopId }}</span>
            </el-form-item>
            <el-form-item label="商品分类">
              <span>{{ props.row.category }}</span>
            </el-form-item>
            <el-form-item label="店铺地址">
              <span>{{ props.row.address }}</span>
            </el-form-item>
            <el-form-item label="商品描述">
              <span>{{ props.row.desc }}</span>
            </el-form-item>
          </el-form>
        </template> -->
        <!-- </el-table-column> -->
        <el-table-column type="selection" width="55" fixed> </el-table-column>
        <el-table-column prop="name" label="姓名" width="100" fixed>
        </el-table-column>
        <el-table-column prop="email" label="邮箱" width="180" fixed>
        </el-table-column>

        <el-table-column prop="contacts" label="联系方式" width="100">
        </el-table-column>
        <el-table-column prop="phone" label="联系号码" width="180">
        </el-table-column>
        <el-table-column prop="productUrl" label="产品地址" width="150">
        </el-table-column>
        <el-table-column label="目标价格" width="150">
          <template slot-scope="scope">{{
            "$" + scope.row.targetPrice
          }}</template>
        </el-table-column>
        <el-table-column prop="distribution" label="地区" width="100">
        </el-table-column>
        <el-table-column prop="orderQuantity" label="单量" width="150">
        </el-table-column>
        <el-table-column label="负责人" width="100">
          <template slot-scope="scope">
            <div v-if="scope.row.user != null">
              {{ scope.row.user.name }}
            </div>
            <div v-else>
              {{ "未分配" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="日期" width="150">
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="150">
        </el-table-column>
        <el-table-column label="操作" width="220" fixed="right">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" size="small"
              >查看</el-button
            >
            <el-button
              type="primary"
              @click="handleClick(scope.row)"
              size="small"
              >编辑</el-button
            >
            <el-button size="small" type="danger" @click="del(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          @current-change="handCurrentChange"
          background
          layout="total,prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>

    <div class="detail" v-show="!show">
      <div class="back">
        <i class="el-icon-arrow-left" @click="back"></i>
      </div>
      <div class="title">
        <i class="el-icon-data-line"></i>
        <span>详细信息</span>
      </div>
      <el-form
        ref="form"
        class="form"
        :inline="true"
        :model="row"
        label-width="100px"
      >
        <el-form-item label="用户名：">
          <el-input v-model="row.name" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="邮箱：">
          <el-input v-model="row.email" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="商品地址：">
          <el-input v-model="row.productUrl" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
      <el-form
        class="form"
        ref="form"
        :inline="true"
        :model="row"
        label-width="100px"
      >
        <el-form-item label="联系方式：">
          <el-input v-model="row.contacts" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="联系码：">
          <el-input v-model="row.phone" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="目标价格：">
          <el-input v-model="row.targetPrice" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
      <el-form
        class="form"
        ref="form"
        :inline="true"
        :model="row"
        label-width="100px"
      >
        <el-form-item label="地区：">
          <el-input v-model="row.distribution" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="单量：">
          <el-input v-model="row.orderQuantity" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="负责人">
          <el-autocomplete
            class="my-autocomplete"
            v-model="state"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            :trigger-on-focus="false"
            @select="handleSelect"
          >
            <template slot-scope="{ item }">
              <div class="name">姓名：{{ item.name }}</div>
              <span class="addr">ID：{{ item.userId }}</span>
            </template>
          </el-autocomplete>
        </el-form-item>
      </el-form>
      <el-row>
        <el-button
          type="primary"
          style="width: 15vw; margin: 0 50px"
          @click="update"
          >确定</el-button
        >
        <el-button
          type="primary"
          style="width: 15vw; margin: 0 50px"
          @click="back"
          >返回</el-button
        >
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      multipleSelection: [],
      loading: false,
      restaurants: [],
      state: "",
      tableData: [],
      show: true,
      row: {},
      params: {
        pageNo: "1",
        pageSize: "8",
        name: "",
        charge: "",
      },
      total: 0,
    };
  },

  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    del(row) {
      this.$http
        .delete(`request-info/${row.id}`)
        .then((res) => {
          if (res.data.code == 200) {
            this.$message.success("删除成功");
            this.getData();
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    onSubmit() {
      this.$http
        .get("request-info/get-info", {
          params: this.params,
        })
        .then((res) => {
          let code = res.data.code;
          if (code == 200) {
            this.tableData = res.data.data.records;
            this.total = res.data.data.total;
          }
          // console.log(res)
        })
        .catch((err) => {
          console.error(err);
        });
    },

    //批量删除
    delSelect() {
      const ids = this.multipleSelection.map((obj) => obj.id);
      // console.log(ids);
      this.$http
        .delete(`request-info/${ids}`)
        .then((res) => {
          let code = res.data.code;
          if (code == 200) {
            this.$message.success("删除成功");
          }
          // console.log(res);
          this.getData();
        })
        .catch((err) => {
          console.error(err);
        });
    },
    // 更新状态
    update() {
      this.$http
        .put("request-info/update", this.row)
        .then((res) => {
          let code = res.data.code;
          if (code == 200) {
            this.$message.success("修改成功");
            setTimeout(() => {
              this.back();
              this.getData();
            }, 1000);
          } else {
            this.$message.error("内部错误");
          }
          // console.log(res)
        })
        .catch((err) => {
          console.error(err);
        });
    },

    handleSelect(item) {
      this.state = item.name;
      // console.log(item);
      this.row.charge = item.userId;
      console.log(this.row);
    },

    async querySearch(queryString, cb) {
      await this.$http
        .get("user/get-user", {
          params: {
            name: this.state,
          },
        })
        .then((res) => {
          let code = res.data.code;
          if (code == 200) {
            this.restaurants = res.data.data;
          }
        })
        .catch((err) => {
          console.error(err);
        });
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      this.timeout = setTimeout(() => {
        cb(results);
      }, 3000 * Math.random());
    },

    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) !==
          -1
        );
      };
    },

    back() {
      this.show = !this.show;
    },

    handleClick(row) {
      this.row = row;
      this.show = !this.show;
    },

    handCurrentChange(val) {
      // console.log(`当前页：${val}`);
      this.params.pageNo = val;
      this.getData();
    },

    getData() {
      this.$http
        .get("request-info/get-info", {
          params: this.params,
        })
        .then((res) => {
          let code = res.data.code;
          if (code == 200) {
            this.tableData = res.data.data.records;
            this.total = res.data.data.total;
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },

  created() {
    this.getData();
  },

  mounted() {
    // this.restaurants = this.loadAll();
  },
};
</script>

<style src="@/style/request.css" scoped>
</style>